<template>
    <el-dialog v-model="dialogFormVisible" title="热门车型列表" size="1000" @close="handleClose">
        <div class="count-title">热门车型总数：{{ datas.length }}</div>
        <el-table :data="datas" max-height="500px">
            <el-table-column label="品牌" prop="brand"></el-table-column>
            <el-table-column label="车型" prop="model"></el-table-column>
            <el-table-column label="年款" prop="year"></el-table-column>
            <el-table-column label="基础价格" prop="year">
                <template #default="{ row }">
                    &yen;{{ row.base_price }}
                </template>
            </el-table-column>
            <el-table-column label="关联价格策略" prop="pricing_count">
                <template #default="{ row }">
                    <el-tag type="success" v-if="row.pricing_count">{{ row.pricing_count }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, computed } from "vue";
const dialogFormVisible = ref(false);

const prop = defineProps({
    datas: {
        type: Array,
        default: [] as any[],
    },
});
const dialogOpen = (id: number) => {
    dialogFormVisible.value = true;
};

const handleClose = () => {
    dialogFormVisible.value = false;
};

defineExpose({
    dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
    margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
